<template>
  <Theme>
    <CpHistogram
      :data="data"
      :option="useOption"
      :extendOption="useExtendOption"
      :style="{ height: '240px' }"
    />
  </Theme>
</template>
<script>
import CpHistogram from '@cci/cp-histogram'
import Theme from '@cci/cp-theme'
import { merge } from '@cci/lib-charts-utils'
const baseOption = {
  grid: {
    left: 5,
    right: 0,
    bottom: 7,
    top: 40,
    containLabel: true
  },
  yAxis: [
    {
      name: '(个)',
      nameTextStyle: {
        color: '#666666',
        nameLocation: 'start'
      }
    }
  ]
}
const baseExtendOption = {}
const baseData = [
  {
    x: '上海',
    y: 100
  },
  {
    x: '深圳',
    y: 75
  },
  {
    x: '合肥',
    y: 30
  },
  {
    x: '成都',
    y: 65
  },
  {
    x: '安徽',
    y: 50
  }
]

export default {
  name: 'ChartHistogram',
  components: {
    Theme,
    CpHistogram
  },
  data() {
    return {
      option: {
        barWidth: 33, // 柱子宽度
        yAxis: [
          {
            name: '(个)',
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: '#666666'
            //   }
            // },
            axisLabel: {
              show: true,
              // fontSize: 14,
              color: '#666666'
            },
            splitLine: {
              lineStyle: {
                color: '#666666'
              }
            }
          }
        ],
        xAxis: [
          {
            axisLabel: {
              show: true,
              // fontSize: 14,
              align: 'center',
              rotate: 0, // 倾斜的程度
              color: '#666666'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666666'
              }
            }
          }
        ],
        textStyle: {
          color: '#188df0'
        },
        series: [
          {
            type: 'bar',
            // showBackground: true,
            itemStyle: {
              color: '#188df0'
            }
          }
        ]
      }
    }
  },
  props: {
    data: {
      type: Array,
      default() {
        return baseData
      }
    },
    // option: {
    //   type: Object,
    //   default () {
    //     return {}
    //   }
    // },
    extendOption: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    useOption() {
      return merge({}, baseOption, this.option)
    },
    useExtendOption() {
      return merge({}, baseExtendOption, this.extendOption)
    }
  }
}
</script>
